<template>
  <el-card class="my-invite-panel question-detail-invite-panel mb-4" shadow="never">
    <div class="panel-title-row">
      <div class="panel-title">你可以邀请下面用户，快速获得回答</div>
      <el-input
        :model-value="inviteSearch"
        @update:model-value="$emit('update:inviteSearch', $event)"
        placeholder="搜索你想邀请的人"
        size="small"
        class="invite-search-input"
        clearable
        prefix-icon="el-icon-search"
      />
    </div>
    <div class="flex flex-col gap-0">
      <div v-for="user in displayedInviteUsers" :key="user.id" class="expert-item flex items-center justify-between py-2 px-2 rounded-lg hover:bg-blue-50 transition">
        <div class="flex items-center gap-3 min-w-0">
          <el-avatar :size="40" :src="user.avatar" />
          <div class="min-w-0">
            <div class="font-medium text-base text-blue-900 truncate">{{ user.name }}</div>
            <div class="text-xs text-gray-500 truncate">{{ user.desc }}</div>
          </div>
        </div>
        <el-button size="small" type="primary" round :disabled="user.invited" @click="$emit('inviteUser', user)">{{ user.invited ? '已邀请' : '邀请回答' }}</el-button>
      </div>
      <div v-if="filteredInviteUsers.length > 5" class="text-center py-2">
        <a class="text-blue-500 cursor-pointer text-sm hover:underline" @click="$emit('toggleShowAll')">
          {{ showAllInvite ? '收起' : '更多推荐结果' }}
        </a>
      </div>
      <div v-if="filteredInviteUsers.length === 0" class="text-gray-400 text-center py-4">暂无匹配用户</div>
    </div>
  </el-card>
</template>
<script setup>
const props = defineProps({
  inviteSearch: String,
  displayedInviteUsers: Array,
  filteredInviteUsers: Array,
  showAllInvite: Boolean
})
</script>
<style scoped>
.my-invite-panel.question-detail-invite-panel {
  border-radius: 14px;
  background: linear-gradient(135deg, #fafdff 0%, #e3f0ff 100%);
  border: none;
  box-shadow: 0 2px 10px 0 rgba(56,112,255,0.07);
  padding: 18px 18px 10px 18px;
}
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.panel-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a237e;
  white-space: nowrap;
}
.invite-search-input {
  background: #f6f8fa;
  border-radius: 8px;
  border: 1px solid #e5eaf3;
  font-size: 14px;
  height: 32px;
  width: 220px;
  margin-left: 0;
  margin-right: 0;
  align-self: flex-end;
}
@media (max-width: 600px) {
  .panel-title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .invite-search-input {
    width: 100%;
    min-width: 0;
  }
}
.expert-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px 0 rgba(56,112,255,0.04);
  margin-bottom: 2px;
  transition: box-shadow 0.16s, background 0.16s;
}
.expert-item:hover {
  box-shadow: 0 4px 16px 0 rgba(56,112,255,0.10);
  background: #f0f6ff;
}
</style> 